<template>
    <div class="notice">
        <div style="display: flex; margin-top: 20px; height: 100px;">
      <transition name="el-zoom-in-center">
        <div  class="el-zoom-in-top">
            <i class="el-icon-close" @click="up_date_cancel"></i>
            <p class="notice_head">正在修改{{tonote.userId}}的记录</p>
            <div class="notice_body">
                <!--  -->
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item   label="账号:">
                 <el-input disabled v-model="form.userId"></el-input>
                </el-form-item>
                <el-form-item label="密码:">
                 <el-input v-model="form.psWord"></el-input>
                </el-form-item>
                <el-form-item label="姓名:">
                 <el-input v-model="form.userName"></el-input>
                </el-form-item>
                <el-form-item label="性别:">
                 <el-select v-model="form.gender" placeholder="请选择性别">
                   <el-option label="男" value="男"></el-option>
                   <el-option label="女" value="女"></el-option>
                 </el-select>
                </el-form-item> 
             <el-form-item label="email:">
                <el-input v-model="form.email"></el-input>
             </el-form-item>
             <el-form-item label="手机号码:">
                <el-input v-model="form.phone"></el-input>
             </el-form-item>  
             <el-form-item label="身份:">
                 <el-select v-model="form.ismaind" placeholder="请选择">
                   <el-option label="管理员" :value=1></el-option>
                   <el-option label="用户" :value=0></el-option>
                 </el-select>  
             </el-form-item> 
             <!-- <el-select v-model="from.ismaind" placeholder="请选择">
                      <el-option
                        :label="'管理员'"
                        :value="1">
                      </el-option>
                      <el-option
                        :label="'用户'"
                        :value="0">
                      </el-option>
             </el-select>   -->
            </el-form>
                <!--  -->
            </div>
            <div class="notice_buttons">
                <!-- <el-button size="small">小型按钮</el-button> -->
                <el-button size="mini" type="text" @click="up_date_cancel" >取消</el-button>
                &nbsp;
                <el-button type="primary" size="mini" @click="up_date_mine" >确定</el-button>
            </div>
        </div>
      </transition>

    </div>
    </div>
</template>
<script>
// import PubSub from 'pubsub.js'
export default ({
    data(){
        return({
            bookid:"",
            message:"",
            updata_cancel:1,
            update_mine:1,
            // Object.freeze(this.tonote),
            // userinfo:this.tonote,
            // userinfo:Object.assign({this.tonote},prop),
           form:JSON.parse(JSON.stringify(this.tonote))
        })
    },
    mounted(){

    },
    methods:{
        // 更新栏传递数据
        up_date_cancel(){
            // console.log("123");
            this.$bus.$emit('bus_up_date_cancel', this.updata_cancel);
            // console.log(this.D_delete);
        },
        up_date_mine(){
            // console.log("123");
            this.$bus.$emit('bus_up_date', this.update_mine);
            console.log(typeof(this.form.userName));
            console.log(this.form.userName);
            this.axios.get('http://192.168.43.171:8081/users/update', {
                      params:{
                        userId:this.form.userId,
                        psWord:this.form.psWord,
                        userName:this.form.userName,
                        gender:this.form.gender,
                        email:this.form.email,
                        phone:this.form.phone,
                        ismaind:this.form.ismaind
                      }
                   // 参数 name
                }).then( (response)=> {
                   this.updata();
                  console.log(response);
                  console.log("1234567");
                }).catch(function (error) {
                  console.log(error);
                });
            this.$message({
              message: '修改成功',
              type: 'success'
            });
        }
    },
    props:{
      tonote:{},
      // tonote:{
      //   // 类型为字符串
      //   type: Number,
      //   // （不传值的时候）默认parentValue1的值为15
      //   // default:
      // }
      updata:{
            type:Function
        }
    }
})
</script>

<style lang="less" scoped>
.notice{
    position: absolute;
    width: 800px;
    height: 558px;
    // background-color: rgba(247, 248, 243,0.95);
    // background-color: rgba(255, 255, 255,0.95);
    background-color: #fff;
    // background-color: #F2F6FC;
    left: 45%;
    top: 50%;
    border-radius: 15px;
    transform: translate(-50%,-50%);
    border-style:solid;
    border-width: 0.1px;
    border-color: rgba(79, 78, 76,0.3);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    .el-icon-close{
        position: absolute;
        top: 1%;
        right: 1%;
        font-size: 23px;
    }
    .notice_head{
        position: absolute;
        font-size: 20px;
        left: 35%;
        top: 2%;
    }
    .notice_body{
        position: absolute;
        width: 80%;
        // height: 50%;
        top: 50px;
        left: 10%;
        // text-align: center;
        // background-color: wheat;
        .input{
            background: #fff !important;
            color: #202124 !important;
        }
        
    }
    .notice_buttons{
        position: absolute;
        bottom: 3%;
        left: 40%;
    }
}
</style>